//该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router';

//引入组件
import About from "../pages/About.vue";
import Home from "../pages/Home.vue";
import News from '../pages/News.vue'
import Messages from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

//创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',//给路由命名，可以简化跳转时候的路径书写，不用path配置项用name配置项,必须配合to的对象写法
            path: '/about',
            component: About,
            meta: { title: '关于' }
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: { title: '主页' },
            children: [//嵌套路由
                {
                    meta: { isAuth: true, title: '新闻' },
                    name: 'xinwen',
                    path: 'news',//子路由不用加'/'或者写全/home/news
                    component: News
                },
                {
                    //meta为路由元信息，里面存储着程序员自定义的东西
                    meta: { isAuth: true, title: '消息' },
                    name: 'xiaoxi',
                    path: 'messages',
                    component: Messages,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:content',
                            component: Detail,
                            props: true,
                            meta: { title: '细节' }
                        }
                    ]
                },
            ]
        },
    ]
});

//全局前置路由，初始化与每一次切换之前调用，并执行回调（全局代表new VueRouter里面配置的路由都可以触发）
router.beforeEach((to, from, next) => {//to代表起始路由的组件的$route,form代表目标路由的组件的$route,next()表示同意这次路由切换，不写就无法切换
    if (to.meta.isAuth) {//用name/path也行
        if (localStorage.getItem('school') === 'mimi') {
            next();//因为为前置路由是在切换前触发，所以如果禁止切换将不会引起url的变化
        } else {
            alert('禁止切换');
        }
    } else {
        next();
    }
    // document.title = to.meta.title//写在前置里面，没有调用next时（禁止切换）title也会变
});
//全局后置路由，初始化与每一次切换之后调用，并执行回调（全局代表new VueRouter里面配置的路由都可以触发）没有next
router.afterEach((to, from) => {
    document.title = to.meta.title
});
export default router
